<script setup>
import comps from "@/components";
import { ref, provide } from "vue";
const { SonCom, ClassDemo, SonCom2, SonCom3, SonCom4 } = comps;

/*
组件通信
**/
const promeg = ref(0);
const msg1 = ref("子组件1");
const msg2 = ref("子组件2");
const handlechangePro = () => {
  promeg.value++;
};
const senMesg = (value) => {
  console.log(1212);
  console.log(value);
};

const parentFun = (value) => {
  console.log("子组件调用父组件方法", value);
};

const thisvalue = ref({
  data: [1, 2, 3, 4],
  state: false,
});

const sendhang = (e) => {
  console.log(e);
};
/**
 * provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性
 * inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得
 * provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。
 * */
const son1demoData = ref("练习provide");
const changeson1demoData = (value) => {
  son1demoData.value = value;
};
provide("prodata", thisvalue);
//如果想确保提供的数据不能被注入方的组件更改，可以使用readonly（）来包装提供的值
// provide('prodata2', readonly(thisvalue))
provide("son1demoData", {
  son1demoData,
  changeson1demoData,
});

const firstName = ref(12);
const lastName = ref("233");

const myText = ref("wewewewew");
</script>

<template>
  <div>
    <p>组件传参练习</p>
    <button @click="handlechangePro">点我呀</button>
    <SonCom
      v-model:firstName="firstName"
      v-model:lastName="lastName"
      :msg="promeg"
      :msg1="msg1"
      :msg2="msg2"
      @sendMsg="senMesg"
      @parentFun="parentFun"
      @sendhang="sendhang"
    ></SonCom>
    <div>{{ firstName }}</div>
    <hr />
    <p>子组件插槽练习</p>
    <SonCom2>wewewewewe</SonCom2>
    <hr />
    <p>事件练习</p>
    <SonCom3 v-model.capitalize="myText" v-model:title.capitalize="lastName" />
    <div>{{ myText }}</div>
    <hr />
    <p>插槽练习</p>
    <SonCom4 v-slot="slotProps">
      <div>default默认插槽写法</div>
      {{ slotProps.text }}
    </SonCom4>
    <SonCom4>
      <template #header="headerProps">
        我是头部内容{{ headerProps.text }}
      </template>
      <template v-slot:content="conProps">
        我是中间内容{{ conProps.text }}
      </template>
    </SonCom4>
  </div>
</template>
<style scoped>
p {
  font-weight: 700;
}
</style>
